<template>
    <h3>立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行</h3>
    <h3>相当于立即收集副作用函数,并在依赖响应式数据修改时触发回调</h3>
    <h3>watchEffect和effect功能类似,watchEffect的option选项只有{flush:'pre'|'post'|'sync'}</h3>
    <h3>pre:默认值,dom更新之前,同步修改同一值只触发一次,即值的修改放入微队列后再把回调函数放入微队列</h3>
    <h3>post:回调放入微队列中执行,即dom更新之后</h3>
    <h3>sync:值变化的时同步执行,同步修改同一值时会多次触发</h3>
    <el-button @click="handleClick">watchEffect+nextTick</el-button>
    <el-button @click="handleClick2">watchEffect++</el-button>
    <h4>deepCounter:{{ deepCounter }}</h4>
    <h4>count:{{ count }}</h4>
</template>

<script setup>
import { ref, watchEffect } from "vue"

const deepCounter = ref({
    counter: 0
})
const count = ref(0)

watchEffect(() => {
    // const h4List = document.querySelectorAll('h4')
    // console.log(h4List[0]);
    // console.log(h4List[1]);
    // console.log(deepCounter.value.counter);
    // debugger
    // console.log(deepCounter.value.counter);
    // console.log(count.value);
}, { flush: 'sync' })
// effect(() => {
//     console.log(deepCounter.value.counter);
//     console.log(count.value);
// }, { lazy: true })

const handleClick = () => {
    deepCounter.value.counter++
    deepCounter.value.counter++

    // nextTick 等价与 自定义Promise
    const h4List = document.querySelectorAll('h4')
    console.log(h4List[0]);
    console.log(h4List[1]);

    const p = Promise.resolve()
    p.then(() => {
        const h4List = document.querySelectorAll('h4')
        console.log(h4List[0]);
        console.log(h4List[1]);
    })
}
const handleClick2 = () => {
    count.value++
}
</script>

<style lang="scss" scoped>
</style>